<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册 - 回声网络</title>
    <style>
        .container { width: 400px; margin: 100px auto; }
        .form-group { margin: 15px 0; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { width: 100%; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }
        .btn:hover { background: #0056b3; }
        .error { color: red; text-align: center; margin: 10px 0; }
    </style>
</head>
<body>
<div class="container">
    <h2 style="text-align: center;">用户注册</h2>
    <div class="error" th:text="${errorMsg}"></div> <!-- Thymeleaf渲染错误信息 -->
    <form action="/echo-network/register" method="post" onsubmit="return checkForm()">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" id="pwd" name="pwd" placeholder="请输入密码（不少于6位）" required>
        </div>
        <div class="form-group">
            <label for="confirmPwd">确认密码</label>
            <input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="nickname">昵称（可选）</label>
            <input type="text" id="nickname" name="nickname" placeholder="请输入昵称（默认与用户名一致）">
        </div>
        <button type="submit" class="btn">注册</button>
        <p style="text-align: center; margin-top: 15px;">已有账号？<a href="login.html">立即登录</a></p>
    </form>
</div>

<script>
    // 前端表单校验
    function checkForm() {
        const username = document.getElementById("username").value.trim();
        const pwd = document.getElementById("pwd").value;
        const confirmPwd = document.getElementById("confirmPwd").value;
        const email = document.getElementById("email").value.trim();

        if (username === "") {
            alert("用户名不能为空！");
            return false;
        }
        // 验证用户名只能包含中文和英文字母
        const usernameRegex = /^[\u4e00-\u9fa5a-zA-Z]+$/;
        if (!usernameRegex.test(username)) {
            alert("用户名只能包含中文和英文字母！");
            return false;
        }
        if (pwd.length < 6) {
            alert("密码长度不能少于6位！");
            return false;
        }
        if (pwd !== confirmPwd) {
            alert("两次输入的密码不一致！");
            return false;
        }
        if (email === "" || !email.includes("@")) {
            alert("请输入有效的邮箱地址！");
            return false;
        }
        return true;
        }
</script>
</body>
</html>